BRAND INDEX
Design System · v1.0 · Single source of truth
The complete system.
Every layer, in one place — foundations, the atomic stack, interactive components, and the rules that bind them.
Web³
EB GARAMOND · ARCHIVO · MONO
01Foundations
Logo
Open ›
AaAaAa
Typography
Open ›
Foundation
Open ›
³
Icons · Viz · Motion
Open ›
02Atomic stack
01–05
Overview
Open ›
01
Atoms
Open ›
02
Molecules
Open ›
03
Organisms
Open ›
04
Templates
Open ›
05
Pages
Open ›
03Interactive components
Components hub
All seven ›
NAV
Nav bar ›
DATA
Table ›
OVERLAY
Modal ›
INPUT
Form ›
FEEDBACK
Toast ›
NAV
Tabs ›
STRUCTURE
Footer ›
04Rules & full index
THE RULEBOOK
Design Spec, in full.
Foundations, layout, blocks, components, 26-page map, ship checklist.
Open ›
EVERYTHING WCN
Brand Portal.
The widest index — system + site pages + product + go-to-market.
Open ›
Atomic structure
Atoms to pages.
The WCN system, walked through atomic design — each tier built from the one below, every piece mapped to a real module.
ATOMS
MOLECULES
ORGANISMS
TEMPLATES
PAGES
01 · ATOMStokens.css · Foundation · Logo · Type
The smallest decisions — a colour, a type size, a radius, the mark. Indivisible.
COLOUR
TYPE
AaAaAa
RADIUS
MARK
02 · MOLECULESIcons · Data-viz · Motion
Atoms combined into simple, single-purpose units — a labelled field, a kicker, a status chip, an icon.
KICKER
Field
Node ID
Verified Node → Proof
03 · ORGANISMSComponent Library · Section blocks A–K
Molecules assembled into distinct sections — a nav bar, a card row, a table, a hero.
NODEREGIONSTATUS
MercerAPACVerified
WCN
AboutProof
Apply
04 · TEMPLATESPage skeleton · 26-page recipes
Organisms arranged into a page skeleton — nav, hero, chapters, closing, footer — with density rules.
Nav
Hero · A
Chapter · B (ink)
Chapter · C (soft)
Footer
05 · PAGESHomepage · About · Apply · Investor…
Templates filled with real content — the finished, shippable pages.
Evidence first.
Homepage
CANONICAL ›
About
Open ›
node.
Apply
Open ›
Read the record.
Investor
Open ›
01 · Atoms
The indivisible tokens.
Every smallest decision, named and valued — the single source the whole system inherits from.
tokens.css
tokens.json
A1Colour tokens
NEUTRAL · INK RAMP
paper-50
F7F4EC
paper
F3EEE3
paper-200
E7E0D2
paper-300
D6CDBA
stone
8C8475
ink-600
6B6456
ink-700
4A443C
ink
16130F
VERMILION · ACCENT SCALE
100
F6D5C9
300
E2876A
500
CF4520
600
B33A18
700
8F2E12
FUNCTIONAL
success
warning
error
Usage ratio ≈ 60% ink/neutral · 30% paper · 7% vermilion · 3% stone. Dark-mode accent shifts to #E2502A.
A2Type tokens
TOKENSPECIMENVALUE
fs-heroHeroGaramond 600 · 96 · −.02em
fs-h2SectionGaramond 500 · 56 · 1.08
fs-h3UI headingArchivo 600 · 22 · 1.3
fs-bodyBody copyArchivo 400 · 16 · 1.6
fs-labelLABEL · 01Mono 600 · 11 · .18em UC
A3Space · Radius · Elevation · Motion
SPACE · 4PT
4·8·12·16·24·32·48
RADIUS
4·8·14·22·pill
ELEVATION
sm·md·lg
MOTION
.7,0,.2,1
signature ease
200·320·600ms
A4Opacity · Border · Dark · Layer
OPACITY
.12 ring · .35 disabled
.55 scrim · 1 solid
BORDER
1px · hairline1.5px · focus2px · rule
ECE6DA·e4dccc·F0EADF
DARK MAP
bg#0D0B09
surface#16130F
border#241F1A
accent#E2502A
Z-INDEX
base0
sticky20
overlay50
toast60
02 · Molecules
Atoms, combined.
Every single-purpose unit built from atoms — the complete set, each labelled with its parts.
ATOMS ↑
MOLECULES ●
ORGANISMS ↓
M1Form molecules
Labelled field
Node ID
label · input · hint
Field · focus
WCN-0xb2a
border · ring
Search
Search…⌘K
icon · input · key
Choice + label
Checkbox
Toggle
M2Status & tags
Verified In review Private Node Region · APAC New ³
M3Identity & navigation
User
A
A. Mercer
Node · APAC
Breadcrumb
Home/Proof/3xQ
Nav item
Overview
Pagination
‹12
M4List item & buttons
List item
N
Settlement
Mercer
›
Icon button
New
icon + label
Progress + label
Review62%
Inline alert
Proof verified
M5Metric · step · data
PROOFS
1,204
▲ 31 · 7d
Flow step
1Apply
Data cell
38 regions
value + unit
Date
2026·06·26
mono · localized
03 · Organisms
Molecules, assembled.
Complete functional sections — each defined once and referenced everywhere. This is the index, not a redraw.
MOLECULES ↑
ORGANISMS ●
TEMPLATES ↓
O1Navigation
Top nav
Homepage ›
Sidebar
Console ›
Footer
About ›
Tab bar
Mobile ›
O2Content blocks · A–K
A
Hero
B
Pillars
C
Is/Isn't
D
Numbers
E
Timeline
F
Steps
G
Bento
H
Roles
I
Quote
J
CTA
K
Ledger
Spec
Spec Full ›
O3Data & product
Table
Console ›
Stat cards
Console ›
Chart card
Icons·Viz·Motion ›
Proof ledger
Trust & Reach ›
O4Form & interaction
Form group
Onboarding ›
Modal
Components ›
Toast stack
Components ›
Search + results
Docs ›
04 · Templates
Organisms, arranged.
The page skeleton, the block library and the density rules — the rules that keep 26 pages from drifting.
ORGANISMS ↑
TEMPLATES ●
PAGES ↓
T1Skeleton & background rhythm
PAGE SKELETON
Sticky nav · 52px
Hero · 1 idea
Chapter (ink)
Chapter (soft)
Quote / CTA
Footer
BACKGROUND RHYTHM
Alternate; never two identical adjacent. ≥1 ink chapter per page. Footer always ink.
DENSITY CAPS
Hero headline ≤ 6 words
Card body ≤ 18 words
Paragraph ≤ 2 lines
Chapters / page ≤ 6 · one dense block each
Section padding 96–130px
T2Block library · pick from A–K
A
Hero
B
Pillars
C
Is/Isn't
D
Numbers
E
Timeline
F
Steps
G
Bento
H
Roles
I
Quote
J
CTA
K
Ledger
11
only these
T3Template recipes · route = blocks
/aboutA B C E I J /why-nowA G I J /applyA F C J /investorA D C J /partnersA B H J /impactA D K J
Legal pages (/privacy, /terms) are the exception — single white column, H3 + short paragraphs, no bento. Account pages (/login, /contact) are hero + one form.
/how-it-worksA F K B J
/nodesA B C J
/pobA K D I J
/economicsA C D J
/governanceA B I J
/proof-ledgerA D E F J
/programsA G F J
/insights · /newsA G J
/atlas · /systemsA G B J
T4Grid & responsive
GRID
12-col · content max 1280px · side padding 60–70px · gutter 18–24px · baseline 8px.
BREAKPOINTS
≥1024 Desktopfull grid · 3–6 cols
640–1023 Tablet2 cols · padding 40px
<640 Mobile1 col stack · padding 20px
05 · Pages
Templates, filled.
The top of the stack — real content poured into templates, shipped. Every page here is live.
TEMPLATES ↑
PAGES ●
●Shipped · live pages
Evidence first.
Homepage CANON
A B D F H J
About
A B C E I J
Why now
Why Now
A G I J
100%
Impact
A D K J
Phase 1–2
Roadmap
A E J
role.
Partners
A B H J
node.
Apply
A F C J
Read the record.
Investor
A D C J
○Backlog · templated, not yet built
/programsA G F J
/contactA H J
/how-it-worksA F K B J
/nodesA B C J
/pobA K D I J
/economicsA C D J
/governanceA B I J
/proof-ledgerA D E F J
/atlasA G J
/insights · /newsA G J
/wiki · /systemsA H B J
/developersA F K J
/privacy · /termslegal
/login · /communityform · H
8 shipped · 18 templated & queued. Each backlog page already has its block recipe — building it is pouring real copy into the template.
WCN · Design System v1.0 · Complete